<template>
	<view class="box">
		<u-navbar :fixed="true" :placeholder="true" title="培训记录" @leftClick="leftClick" bgColor="#0F53AC"
			leftIconColor="#fff">
		</u-navbar>
		<view class="top">
			<view class="title-top">{{dataForm.name}}</view>
			<view class="top-tags">
				<view class="tag-info">{{dataForm.categoryName}}</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="kiss-upDown-list" v-if="trainWay == 2">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>
					培训内容
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea class="textrea" v-model="trainRecord.content" placeholder="请输入培训内容" maxlength="1000">
				</u--textarea>
			</view>
		</view>
		<view class="kiss-upDown-list">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>
					培训小结
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea class="textrea" v-model="trainRecord.briefSummary" placeholder="请输入培训小结" maxlength="1000">
				</u--textarea>
			</view>
		</view>
		<view class="kiss-title">
			<view class="left">
				培训照片<view v-if="isInspec == 0" style="color: #8c8c8c;">(可传9张)</view>
			</view>
		</view>
		<view class="kiss-upload">
			<uploadImg :maxCount="isInspec == 0?9:fileList1.length" @getdata="getdata" :fileType="16"
				:fileList="fileList1" :sourceType="sourceType" :deletable="isInspec == 0"
				@deletePicture="deletePicture"></uploadImg>
		</view>
		<view class="kiss-upDown-list">
			<view class="bx-list-title">
				<view class="left">
					备注
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea class="textrea" v-model="trainRecord.remark" placeholder="请输入备注" maxlength="1000">
				</u--textarea>
			</view>
		</view>

		<view class="kiss-list" v-if="dataForm.signFlag == 1">
			<view class="kiss-list-title" @click="handleToName">
				<view class="left">
					签到人数
				</view>
				<view class="right1">
					<view class="select-bg" v-if="dataForm.planNum == dataForm.signedNum">
						{{ `全部签到 共${dataForm.planNum}人` }}
					</view>
					<view class="select-bg" v-else>
						{{ `${dataForm.planNum - dataForm.signedNum}人未签到` }}
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="kiss-list" v-if="dataForm.courseId != ''">
			<view class="my-title">
				关联课程
			</view>
			<view class="kcInfo">
				<image class="kcInfo-img" :src="unionData.courseImage" mode=""></image>
				<view class="kcInfo-con">
					<view class="name">
						{{unionData.courseName}}
					</view>
					<view class="name2">
						学习进度: {{unionData.hadCourseNum}}/{{unionData.courseUserNum}}
					</view>
					<view class="name2">
						学习开始时间: {{unionData.courseBeginTime}}
					</view>
				</view>
			</view>
			<view class="kcBtn">
				<view class="selectJd" @click="selectJinDu(0)">
					查看进度
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="kiss-list" v-if="dataForm.examPaperId != ''">
			<view class="my-title">
				关联试卷
			</view>
			<view class="kcInfo">
				<image class="kcInfo-img" :src="unionData.examPaperImage" mode=""></image>
				<view class="kcInfo-con">
					<view class="name">
						{{unionData.examPaperName}}
					</view>
					<view class="name2">
						考试进度: {{unionData.hadExamNum}}/{{unionData.examUserNum}}
					</view>
					<view class="name2">
						考试开始时间: {{unionData.examBeginTime}}
					</view>
				</view>
			</view>
			<view class="kcBtn">
				<view class="selectJd" @click="selectJinDu(1)">
					查看进度
				</view>
			</view>
		</view>
		<!-- <view class="line8"></view> -->
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					<view style="color: red;">*</view>
					记录员
				</view>
				<view class="right1">
					<view v-if="trainRecord.recorderSign || sign" class="my-btn2"
						@click="$dianji(handleSeeSign,'onoff2')">
						查看签名
					</view>
					<template v-else>
						<view v-if="isSign" class="my-btn" @click="$dianji(handleCheckSign,'onoff1')">
							一键签名
						</view>
						<template v-else>
							<view @click="$dianji(handleToSetSign,'onoff3')">请签字</view>
							<view class="iconfont icon-app-xiangyou"></view>
						</template>
					</template>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-subside" style='height: 162rpx;'></view>
		<view class="kiss-bottom-double">
			<view class="btn-left" @click="$dianji(draft,'onoff4')">保存为草稿</view>
			<view class="btn-right" @click="$dianji(sumbit,'onoff5')">保存并提交</view>
		</view>

		<u-modal :show="show" title="提示" :showConfirmButton="true" :showCancelButton="true" confirmColor="#0F53AC"
			cancelColor="#576B95" :buttonReverse="true" @confirm="confirm" @cancel="cancel">
			<view class="slot-content my-modal">
				<view>确定提交？提交后参与培训人员将无法进行签到、学习、考试操作</view>
			</view>
		</u-modal>
		<u-modal :show="showBack" title="提示" :showConfirmButton="true" :showCancelButton="true" confirmColor="#0F53AC"
			cancelColor="#000" :buttonReverse="false" @confirm="confirmBack" @cancel="cancelBack">
			<view class="slot-content my-modal">
				<view>教育培训过程记录尚未保存,您确定要退出吗</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import uploadImg from '../components/uploadimg/uploadimg.vue';
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				// 培训id
				id: '',
				show: false,
				showBack: false,
				isInspec: 0,
				// 培训详情
				dataForm: {

				},
				// 培训记录
				trainRecord: {
					content: '',
					briefSummary: '',
					remark: '',
					trainImgs: '',
					recorderSign: ''
				},
				fileList1: [],
				saveParams: {
					pictures: '',
				},
				sourceType: ['album', 'camera'],
				onoff1: true,
				onoff2: true,
				onoff3: true,
				onoff4: true,
				onoff5: true,
				// 是否设置过签名
				isSign: false,
				oldSign: '',
				// 签名设置
				sign: '',
				trainWay: 0,
				unionData: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.trainWay = options.trainWay
			this.initData()
			this.getSign()
			this.getUnionData()
		},
		// onUnload() {
		// 	var pages = getCurrentPages(); //当前页面栈
		// 	if (pages.length > 1) {
		// 		var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
		// 		beforePage.data.refreshIfNeeded = true;
		// 	}
		// },
		onShow() {
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage.data.refreshIfNeeded) {
				currentPage.data.refreshIfNeeded = false;
				this.getSign(true)
			}
		},
		methods: {
			leftClick() {
				this.showBack = true
			},
			getUnionData() {
				uni.$u.http.get(`/train/mobile/train/getUnionData/${this.id}`).then(res => {
					if (res.code == 0) {
						this.unionData = res.data
					}
				})
			},
			getSign(type = false) {
				uni.$u.http.get(`/base/mobile/userInfo/getLoginUserInfo`).then(res => {
					if (res.code == 0) {
						if (res.data.userSign) {
							this.isSign = true
							this.oldSign = res.data.userSign
							if (type) {
								this.sign = res.data.userSign
							}
						}
					}
				}).catch(err => {})
			},
			initData() {
				uni.$u.http.get(`/train/mobile/train/trainDetail/${this.id}`).then(res => {
					if (res.code == 0) {
						this.dataForm = res.data
						if(res.data.trainRecord&&res.data.trainRecord != ''){
							this.trainRecord = res.data.trainRecord 
						}
						//异常照片
						this.fileList1 = [];
						this.saveParams.pictures = res.data.trainRecord.trainImgs;
						if (res.data.trainRecord.trainImgs) {
							var pictures = res.data.trainRecord.trainImgs.split(',')
							pictures.forEach(s => {
								let dd = {
									url: s
								}
								this.fileList1.push(dd);
							})
						}
					}
				}).catch(err => {})
			},
			// 暂存
			draft() {
				// const {
				//   content,
				//   briefSummary,
				//   remark,
				// } = this.trainRecord
				let params = {
					trainId: this.id, // 培训id
					content: this.trainRecord.content || '', // 培训内容
					briefSummary: this.trainRecord.briefSummary || '', // 培训小结
					remark: this.trainRecord.remark || '', // 备注
					trainImgs: this.saveParams.pictures, //照片
					recorderSign: this.trainRecord.recorderSign || this.sign,
				}
				params.draftFlag = 1 // 是否为草稿；0.否  1.是
				console.log(params);
				this.setData(params)
			},
			// 提交
			sumbit() {
				console.log(this.trainRecord)
				if (this.trainWay == 2 && this.trainRecord.content == '') {
					return uni.$u.toast("请填写培训内容")
				}
				if (this.trainRecord.briefSummary == '') {
					return uni.$u.toast("请填写培训小结")
				}
				if (this.trainRecord.recorderSign == '' && this.sign == '') {
					return uni.$u.toast("记录员未签名")
				}
				// if (this.dataForm.planNum - this.dataForm.signedNum > 0) {
				this.show = true
				// return
				// }
			},
			setData(params) {
				uni.$u.http.post(`/train/mobile/train/saveOrUpdate`, params).then(res => {
					if (res.code == 0) {
						uni.$u.toast('提交成功')
						if (params.draftFlag) {
							setTimeout(() => {
								let pages = getCurrentPages(); //获取所有页面栈实例列表
								let nowPage = pages[pages.length - 1]; //当前页页面实例
								let prevPage = pages[pages.length - 2]; //上一页页面实例
								prevPage.data.recordNeeded = true;
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else {
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								})
							}, 1000)
						}

					}
				}).catch(err => {})
			},
			confirm() {
				this.show = false
				const {
					content,
					briefSummary,
					remark,
				} = this.trainRecord
				const params = {
					trainId: this.id, // 培训id
					content: this.trainRecord.content || '', // 培训内容
					briefSummary: this.trainRecord.briefSummary || '', // 培训小结
					remark: this.trainRecord.remark || '', // 备注
					trainImgs: this.saveParams.pictures, //照片
					recorderSign: this.trainRecord.recorderSign || this.sign,
				}
				params.draftFlag = 0 // 是否为草稿；0.否  1.是
				this.setData(params)
			},
			cancel() {
				this.show = false
			},

			confirmBack() {
				this.showBack = false
				uni.navigateBack({
					delta: 1
				})
			},

			cancelBack() {
				this.showBack = false
			},

			getdata(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				if (this.pictrueList.length > 0) {
					this.saveParams.pictures = "";
					let arry = []
					this.pictrueList.map(item => {
						arry.push(item.url)
						let dd = {
							url: item.url
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},
			deletePicture(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				this.saveParams.pictures = "";
				if (this.pictrueList.length > 0) {

					let arry = []
					this.pictrueList.map(item => {
						arry.push(item.url)
						let dd = {
							url: item.url
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},
			// 查看全部签名
			handleToName() {
				uni.navigateTo({
					url: `/pages/subPackagesC/mineTrain/trainSchedule?type=${2}&trainId=${this.id}`
				})
			},
			handleCheckSign() {
				this.sign = this.oldSign
			},
			handleSeeSign() {
				uni.$u.http.get(
					`/base/upload/bindFileUrl?fileUrl=${this.trainRecord.recorderSign || this.sign}`
				).then(res => {
					if (res.code == 0) {
						uni.navigateTo({
							url: `/pages/subPackagesD/mycenter/sginselect?url=
								${encodeURIComponent(JSON.stringify(res.data))}&noShow=true`
						})
					}
				}).catch(err => {})
			},
			handleToSetSign() {
				uni.navigateTo({
					url: `/pages/subPackagesD/mycenter/signname?nameType=sign`
				})
			},

			//查看进度
			selectJinDu(type) {
				uni.navigateTo({
					url: `/pages/subPackagesC/mineTrain/trainSchedule?type=${type}&trainId=${this.dataForm.id}&isKecheng=${this.dataForm.courseId != ''}&isKaoshi=${this.dataForm.examPaperId != ''}&isQiandao=${this.dataForm.signFlag == 1}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.top {
			background-color: #fff;
			padding: 32rpx;

			.title-top {
				font-size: 17px;
				font-weight: 500;
				color: #2B2B2B;
			}

			.top-tags {
				display: flex;
				font-size: 24rpx;
				margin-top: 16rpx;

				.tag-info {
					border-radius: 4px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 4px 12px;
					background-color:  rgba(140, 140, 140, 0.2);
					color: #8C8C8C;
					margin-right: 24rpx;
				}

				.tag-unStart {
					border-radius: 4px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 4px 12px;
					color: rgba(2, 173, 130, 1);
					background: rgba(40, 184, 105, 0.2);
				}
			}
		}

		.my-modal {
			text-align: center;
		}

		.kcInfo {
			padding: 32rpx;
			display: flex;

			.kcInfo-img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 32rpx;
				min-width: 160rpx;
			}

			.kcInfo-con {
				font-weight: 400;
				align-items: flex-end;
			
				.name {
					font-size: 32rpx;
					color: #2B2B2B;
					margin-bottom: 16rpx;
				}
				
				.name2{
					font-size: 28rpx;
					color: #4C4C4C;
				}
			}
		}

		.kcBtn {
			display: flex;
			text-align: center;

			.learn {
				width: 50%;
				border: 2rpx solid #EDEDED;
				padding: 28rpx 0;
				color: black;
			}

			.selectJd {
				width: 100%;
				border: 2rpx solid #EDEDED;
				padding: 28rpx 0;
				color: rgba(15, 83, 172, 1);
			}
		}
		
		.my-title {
			background-color: #fff;
			padding: 32rpx 32rpx 0 32rpx;
			font-weight: 600;
		}
	}
	
	.my-btn {
		padding: 14rpx 24rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(15, 83, 172, 1);
		color: rgba(15, 83, 172, 1);
		font-size: 28rpx;
		border-radius: 8rpx;
	}
	
	.my-btn2 {
		padding: 14rpx 24rpx;
		background: rgba(15, 83, 172, 1);
		border: 1px solid rgba(15, 83, 172, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		border-radius: 8rpx;
	}
</style>
